<template>
	<view class="wrap">
		<u-waterfall v-model="resData" ref="uWaterfallRef">
			<template v-slot:left="{ leftList }">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.thum[0].url" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{ item.name }}
					</view>
					<view class="demo-price">{{ item.money }}元</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">自营</view>
						<view class="demo-tag-text">放心购</view>
					</view>
					<view class="demo-shop">
						{{ item.brandId[0].name }}
					</view>
				</view>
			</template>
			<template v-slot:right="{ rightList }">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.thum[0].url" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{ item.name }}
					</view>
					<view class="demo-price">{{ item.money }}元</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">自营</view>
						<view class="demo-tag-text">放心购</view>
					</view>
					<view class="demo-shop">
						{{ item.brandId[0].name }}
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus"></u-loadmore>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';

const page = ref(1);
const limit = ref(5);
const resData = ref([]);
const loadStatus = ref('loadmore');
const goodObj = uniCloud.importObject('mall-goods');
const addRandomData = async () => {
	let list = await goodObj.getAllGoods(page.value, limit.value);
	if (list.data.length < limit.value) {
		loadStatus.value = 'nomore';
	} else {
		loadStatus.value = 'loadmore';
	}
	if (resData.value == []) {
		resData.value = list.data;
	} else {
		resData.value = [...resData.value, ...list.data];
	}
};
onLoad(() => {
	addRandomData();
});
onReachBottom(() => {
	if (loadStatus.value != 'nomore') {
		page.value += 1;
		addRandomData();
	}
});
</script>

<style>
/* page不能写带scope的style标签中，否则无效 */
page {
	background-color: rgb(240, 240, 240);
}
</style>

<style lang="scss" scoped>
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 8px;
	position: relative;
}

.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}

.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: #000;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	background-color: #000;
	color: #ffffff;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-text {
	border: 1px solid #000;
	color: #000;
	margin-left: 10px;
	border-radius: 50rpx;
	line-height: 1;
	padding: 4rpx 14rpx;
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	font-size: 20rpx;
}

.demo-price {
	font-size: 30rpx;
	color: #000;
	margin-top: 5px;
}

.demo-shop {
	font-size: 22rpx;
	color: #000;
	margin-top: 5px;
}
</style>
